import { createElement, HTMLAttributes, type FC } from 'react';
import classNames from 'classnames';

import { commentGroupDefaultProps } from './defaultProps';
import type { CommentGroupOptions } from './type';

export interface CommentGroupProps extends CommentGroupOptions, HTMLAttributes<HTMLDivElement> {}

const CommentGroup: FC<CommentGroupProps> = (props) => {
  const { className, collapsed, threaded, minimal, size, inverted, children, forwardedRef, ...commentGroupProps } =
    props;

  return createElement(
    'div',
    {
      ref: forwardedRef,
      className: classNames('ui', { collapsed, threaded, minimal, inverted }, size, 'comments', className),
      ...commentGroupProps,
    },
    children,
  );
};

CommentGroup.displayName = 'CommentGroup';
CommentGroup.defaultProps = commentGroupDefaultProps;

export default CommentGroup;
